<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>下拉菜单</title>
		<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
		<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js" ></script>
		<script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js" ></script>
		<link rel="stylesheet" href="../js/easyui/themes/default/easyui.css">
		<link rel="stylesheet" href="../js/easyui/themes/icon.css" />
		<script type="text/javascript" src="../js/ztree/jquery.ztree.all-3.5.js" ></script>
		<link rel="stylesheet" href="../js/ztree/zTreeStyle.css" />
		<script type="text/javascript">$
			$(function(){
				var setting = {
					data: {
						simpleData: {
							enable:true,
						}
					},
					callback: {
						onClick: function(event,treeId, treeNode,clickFlag) {
							var content = '<div style="width:100%;height:100%;overflow:hidden;">'
								+ '<iframe src="'
								+ treeNode.page
								+ '" scrolling="auto" style="width:100%;height:100%;border:0;" ></iframe></div>';
							if(treeNode.page!=undefined&& treeNode.page!=""){
								if($("#tt").tabs('exists',treeNode.name)){
									$("#tt").tabs('select',treeNode.name)
								}else{
									$("#tt").tabs('add',{
										title:treeNode.name,
										content:content,
										iconCls:'icon-reload',//添加一个刷新按钮
										closable:true
									});
								}
							}
						}
					}
				};
				var zNodes =[
				{id:1, pId:0, name:"基础数据", open:false},
				{id:2, pId:0, name:"受理", open:false},
				{id:3, pId:0, name:"调度", open:false},
				{id:4, pId:0, name:"分拣管理", open:false},
				{id:101, pId:1, name:"收派标准", page:"../pages/base/standard.html"},
				{id:102, pId:1, name:"基础档案设置", file:"core/simpleData"},
				{id:201, pId:2, name:"子节点一", file:"core/standardData"},
				{id:202, pId:2, name:"子节点二", file:"core/simpleData"},
				{id:301, pId:3, name:"子节点一", file:"core/standardData"},
				{id:302, pId:3, name:"子节点二", file:"core/simpleData"},
				{id:401, pId:4, name:"子节点一", file:"core/standardData"},
				{id:402, pId:4, name:"子节点二", file:"core/simpleData"},
				{id:103, pId:1, name:"百度", page:"https://www.baidu.com"}
				];
				
				$.fn.zTree.init($("#tree"), setting, zNodes);
				
				$("#tt").tabs({
					onContextMenu:function(e,table,index){
						
						/*阻值默认事情行为*/
						e.preventDefault();
							/*显示菜单*/
						$("#mm").menu('show', { 
							left: e.pageX, 
							top: e.pageY
						});
					}
					
				});
				
				/*消息框*/
				$.messager.show({  	
				  title:'宅急送管理系统',  	
				  msg:'欢迎登陆宅急送物流管理系统!',  	
				  timeout:5000,  	
				  showType:'slide'  
				});  
				$("#dl").click(function(){
					$("#win").window('open');
					
				});
			});
			
		</script>
	</head>
	<body class="easyui-layout"> 

		<div data-options="region:'north',title:'传智博客管理系统',split:true" style="height:140px;">
			<input type="button" value="登陆" id="dl" />
		</div> 
		
		<div data-options="region:'south',title:'South Title',split:true" style="height:140px;">南部部分</div> 
		
		<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:200px;">东部部分</div> 
		
		<div data-options="region:'west',title:'菜单导航',split:true" style="width:240px;">
			<div id="aa" class="easyui-accordion" data-options="fit:true"> 
				<div data-options="title:'基础菜单'">
					<ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul>
				</div>
				<div data-options="title:'系统菜单'"></div>
			</div> 
		</div> 
		<div data-options="region:'center',title:'信息中心'" style="background:#eee;">
			<div id="tt" class="easyui-tabs" data-options="fit:true"> 
				<div data-options="title:'选项卡面板一'" closable="true"></div>
				<div data-options="title:'选项卡面板二'" closable="true"></div>
			</div> 
		</div> 
		<!--菜单初始化-->
		<div id="mm" class="easyui-menu" style="width:120px;"> 
			<div>关闭当前窗口</div>
			<div>关闭其他窗口</div>
			<div class="menu-sep"></div> 
			<div data-options="iconCls:'icon-cancel'">关闭全部窗口</div>
		</div>
		<!--建立一个登陆窗口-->
		<div id="win" class="easyui-window" title="用户登陆" style="width:300px;height:180px;" modal="true" closed="true">  
		    <form style="padding:10px 20px 10px 40px;">  
		        <p>用户名: <input type="text" name="username"></p>  
		        <p>密码: <input type="password" name="password"></p>  
		        <div style="padding:5px;text-align:center;">  
		            <a href="#" class="easyui-linkbutton" icon="icon-ok">登陆</a>  
		            <a href="#" class="easyui-linkbutton" icon="icon-cancel">取消</a>  
		        </div>  
		    </form>  
		</div>  
	</body> 


</html>
